<template>
  <div>
    <div id="line3"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const response = await this.$http.get("alerts/commentsBySentimentLastWeek")
      if (response.status == 200) {
        const data = response.data;
        this.negativeList = data[0].negative
        this.positiveList = data[1].positive
        this.neutralList = data[2].neutral
        this.updateChartData()
      }
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("line3"));

      this.chart.setOption({
        title: {
          text: "情感趋势",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20
          },
          top: "-1%",
          left: "40%"
        },
        color: ['#00DEF2', '#0055F2', '#F27300'],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(13, 64, 71, 0.50)',
          borderColor: 'rgba(143, 225, 252, 0.60)',
          padding: 8,
          textStyle: {
            color: '#fff',
          }
        },
        legend: {
          data: ['积极', '消极', '中性'],
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 14,
          top: 20,
          right: 15,
          textStyle: {
            fontSize: 14,
            color: '#737A85'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {                     // 轴线设置
            show: false,                   // 显示轴线
          },
          axisLabel: {
            textStyle: {
              color: '#737A85',  //更改坐标轴文字颜色
              fontSize: 12     //更改坐标轴文字大小
            }
          },
          data: ["2020-01-01",
            "2020-01-02",
            "2020-01-03",
            "2020-01-04",
            "2020-01-05",
            "2020-01-06",
            "2020-01-07"]
        },
        yAxis: {
          name: '',
          nameTextStyle: {
            fontSize: 14
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#737A85',
              type: 'dashed'
            },
          },
          axisLabel: {
            textStyle: {
              color: '#737A85',  //更改坐标轴文字颜色
              fontSize: 12     //更改坐标轴文字大小
            }
          },
        },
        series: [
          {
            name: '积极',
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              shadowColor: '#fff',
              shadowBlur: 10
            },
            label: {
              show: true,
              position: 'right',
              color: '#fff'
            },
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'RGBA(0, 222, 242, 0.6)'
                },
                {
                  offset: 1,
                  color: 'RGBA(0, 222, 242, 0)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '消极',
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              shadowColor: '#fff',
              shadowBlur: 10
            },
            label: {
              show: true,
              position: 'right',
              color: '#fff'
            },
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'RGBA(0, 85, 242, 0.6)'
                },
                {
                  offset: 1,
                  color: 'RGBA(0, 85, 242, 0)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '中性',
            type: 'line',
            // smooth: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              shadowColor: '#fff',
              shadowBlur: 10
            },
            label: {
              show: true,
              position: 'right',
              color: '#fff'
            },
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'RGBA(242, 115, 0, 0.6)'
                },
                {
                  offset: 1,
                  color: 'RGBA(242, 115, 0, 0)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0]
          },
        ]
      });
    },
    updateChartData() {
      const negativeCount = this.negativeList.map(item => item.count)
      const positiveCount = this.positiveList.map(item => item.count)
      const neutralCount = this.neutralList.map(item => item.count)
      const dateList = this.neutralList.map(item => item.date)
      this.chart.setOption({
        xAxis: {
          data: dateList
        },
        series: [
          {
            data: positiveCount
          },
          {
            data: negativeCount
          },
          {
            data: neutralCount
          }]
      })
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

<style lang="scss" scoped>
#line3 {
  width: 100%;
  height: 40vh;
  // background-color: #554444;
}
</style>